<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="formRef" :model="form" :rules="rules" label-position="top">
				<uni-forms-item label="角色名称" name="roleName" required>
					<uni-easyinput v-model="form.roleName" disabled />
				</uni-forms-item>
				<uni-forms-item label="权限字符" name="roleKey" required>
					<uni-easyinput v-model="form.roleKey" disabled />
				</uni-forms-item>
				<uni-forms-item label="权限范围" name="dataScope" required>
					<xy-checkbox v-model="form.dataScope" :data="dataScopeOptions" />
				</uni-forms-item>
				<uni-forms-item label="数据权限" name="deptIds" v-if="form.dataScope == 2">
					<xy-drawer-tree-select v-model="form.deptIds" :data="deptOptions" value-name="id" multiple />
				</uni-forms-item>
				<uni-forms-item>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="submitForm()">确认</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="cancel()">取消</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		addRole,
		changeRoleStatus,
		dataScope,
		delRole,
		getRole,
		listRole,
		updateRole,
		deptTreeSelect
	} from "@/pages_work/api/system/role";
	import {
		roleMenuTreeselect,
		treeselect as menuTreeselect
	} from "@/pages_work/api/system/menu";
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable
	} = proxy.useDict("sys_normal_disable");

	/** 表单数据 */
	const form = ref({});

	/** 数据范围选项*/
	const dataScopeOptions = ref([{
			value: "1",
			label: "全部数据权限"
		},
		{
			value: "2",
			label: "自定数据权限"
		},
		{
			value: "3",
			label: "本部门数据权限"
		},
		{
			value: "4",
			label: "本部门及以下数据权限"
		},
		{
			value: "5",
			label: "仅本人数据权限"
		}
	]);

	const deptOptions = ref([]);

	/** 表单检验规则 */
	const rules = ref(proxy.uniappRules({
		roleName: [{
			required: true,
			message: "角色名称不能为空",
			trigger: "blur"
		}],
		roleKey: [{
			required: true,
			message: "权限字符不能为空",
			trigger: "blur"
		}],
		roleSort: [{
			required: true,
			message: "角色顺序不能为空",
			trigger: "blur"
		}]
	}))

	onLoad((params) => {
		uni.setNavigationBarTitle({
			title: params.title
		});
		if (params.roleId == undefined || params.roleId == null || params.roleId == '') {} else {
			handleUpdate(params)
		}
	})

	/** 取消按钮 */
	const cancel = () => {
		uni.navigateBack()
	}

	/** 提交按钮 */
	const submitForm = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			if (valid) {
				if (form.value.roleId != undefined) {
					dataScope(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						setTimeout(uni.navigateBack, 1000);
					});
				}
			}
		});
	}

	/** 修改角色 */
	const handleUpdate = (row) => {
		const roleId = row.roleId;
		getRole(roleId).then(response => {
			form.value = response.data;
			getDeptTree(roleId);
		});
	}

	/** 根据角色ID查询部门树结构 */
	function getDeptTree(roleId) {
		return deptTreeSelect(roleId).then(response => {
			deptOptions.value = response.depts;
			form.value.deptIds = response.checkedKeys
			return response;
		});
	}
</script>

<style lang="scss">
	@import "@/static/scss/work/form.scss";
</style>